.high-light-wrapper {
  text-align: left;
  font-size: var(--font-size-code);

  .hljs {
    font-weight: var(--font-weight-normal);
    padding-inline: 0;
    padding-block: 1.2em;

    &::-webkit-scrollbar {
      height: var(--scrollbar-size);
    }

    &::-webkit-scrollbar-thumb {
      background-color: transparent;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-track {
      background-color: transparent;
    }

    &.light {
      &:hover {
        &::-webkit-scrollbar-thumb {
          background-color: var(--color-scrollbar-thumb);
          border-radius: 4px;
        }
      }
    }

    &.dark {
      &:hover {
        &::-webkit-scrollbar-thumb {
          background-color: var(--scrollbar-handle-light-bg);
          border-radius: 4px;
        }
      }
    }
  }

  .code-pre {
    padding-inline: 12px 12px;
    border-radius: 0 0 var(--border-radius-mini) var(--border-radius-mini);
    position: relative;
    white-space: pre-wrap;

    code {
      line-height: 1.5;
    }

    &.copyable {
      padding-inline: 12px 32px;
    }

    .copy-button {
      position: absolute;
      top: 6px;
      right: 6px;
    }

    &.dark {
      background-color: var(--color-editor-dark);

      &:hover {
        &::-webkit-scrollbar-thumb {
          background-color: var(--scrollbar-handle-light-bg);
          border-radius: 4px;
        }
      }
    }

    &.light {
      background-color: rgb(250, 250, 250);

      &:hover {
        &::-webkit-scrollbar-thumb {
          background-color: var(--color-scrollbar-thumb);
          border-radius: 4px;
        }
      }
    }
  }
}
